<template>
  <div class="about-master-container">
    <base-breadcrumb :breadcrumb="!isAudit">
      <b-steps
        :current="stepVal"
        direction="vertical"
        @change.self="stepChange"
      >
        <b-step title="基本信息">
          <a-card
            v-show="activeKey[0]"
            slot="description"
            v-loading="loading"
            :bordered="false"
          >
            <a-form-model
              ref="ruleForm"
              :model="formData"
              :rules="rules"
            >
              <a-row>
                <a-col span="8">
                  <a-form-model-item
                    label="所属分公司"
                    prop="branchComId"
                  >
                    <SelectSubCompany
                      v-model="formData.branchComId"
                      placeholder="请选择"
                      :disabled="state === 3"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="项目名称"
                    prop="projectId"
                  >
                    <SelectProject
                      v-model="formData.projectId"
                      placeholder="请选择"
                      :form="formData"
                      :is-clear="true"
                      key-value="branchComId"
                      :disabled="state === 3"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="云筑网合同入库编码">
                    <BaseInput
                      v-model="formData.yunzhuCode"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="合同类别"
                    prop="contractTypeId"
                  >
                    <a-select
                      v-model="formData.contractTypeId"
                      :disabled="state === 3"
                    >
                      <a-select-option
                        v-for="item in typeArr"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="合同编号"
                    prop="code"
                  >
                    <BaseInput
                      v-model="formData.code"
                      :disabled="state === 3"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="合同名称"
                    prop="name"
                  >
                    <BaseInput
                      v-model="formData.name"
                      :disabled="state === 3"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="工程名称"
                    prop="constructionTypeId"
                  >
                    <a-select
                      v-model="formData.constructionTypeId"
                      :disabled="state === 3"
                    >
                      <a-select-option
                        v-for="item in getProgrammeArr"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="合同相对方"
                    prop="supplier"
                  >
                    <BaseInput
                      v-model="formData.supplier"
                      :disabled="state === 3"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同价款">
                    <BaseInput
                      v-model="formData.contractPrice"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="合同份数"
                    prop="size"
                  >
                    <BaseInputNumber
                      v-model="formData.size"
                      :is-int="true"
                      placeholder="请输入"
                      :min="0"
                      :disabled="state === 3"
                    />
                  </a-form-model-item>
                </a-col>

                <a-col span="8">
                  <a-form-model-item
                    label="业务主管"
                    prop="materialPeople"
                  >
                    <a-input-search
                      v-model="formData.materialPeople"
                      placeholder="请选择"
                      :disabled="disabled"
                      @click="$refs.personList.open()"
                      @search="$refs.personList.open()"
                    />
                  </a-form-model-item>
                </a-col>

                <a-col span="8">
                  <a-form-model-item label="联系电话">
                    <BaseInput
                      v-model="formData.materialTel"
                      disabled
                      type="number"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="云筑网合同归档日期"
                    prop="archiveDate"
                  >
                    <a-date-picker
                      v-model="formData.archiveDate"
                      :disabled="disabled"
                      value-format="x"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="是否一致（合同匹配性）"
                    prop="fixed"
                  >
                    <a-radio-group
                      v-model="formData.fixed"
                      name="radioGroup"
                      :disabled="state === 3"
                    >
                      <a-radio :value="'1'">
                        是
                      </a-radio>
                      <a-radio :value="'0'">
                        否
                      </a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                </a-col>
                <a-col span="24">
                  <a-form-model-item
                    label="差异点："
                    prop="diffs"
                  >
                    <BaseInput
                      v-model="formData.diffs"
                      :disabled="state === 3"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="创建人">
                    <BaseInput
                      v-model="formData.creatorName"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="创建时间">
                    <BaseInput
                      v-model="formData.createTime"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
            <div
              v-if="!isAudit"
              class="pub-next-btn"
            >
              <a-button
                v-show="!disabled"
                type="primary"
                @click="temporaryStorage()"
              >
                保存草稿
              </a-button>
              <a-button
                type="primary"
                @click="temporaryStorage(true)"
              >
                下一步
              </a-button>
            </div>
          </a-card>
        </b-step>
        <b-step title="采购明细">
          <a-card
            v-if="activeKey[1]"
            slot="description"
            :bordered="false"
          >
            <materials
              :id="formData.id"
              ref="materials"
              :state="state"
              @getTotal="getTotal"
            />
            <div
              v-if="!isAudit"
              class="pub-next-btn"
            >
              <a-button
                type="primary"
                @click="previous"
              >
                上一步
              </a-button>
              <a-button
                type="primary"
                :disabled="!formData"
                @click="next"
              >
                下一步
              </a-button>
            </div>
          </a-card>
        </b-step>
        <b-step title="相关附件">
          <a-card
            v-if="activeKey[2]"
            slot="description"
            :bordered="false"
          >
            <u-table
              :is-show="!disabled"
              :upload-list="addFile"
              :delete-url="fileDel"
              :list-url="fileList"
              :business-id="formData.id"
              business-code="MM05"
            />
            <div
              v-if="!isAudit"
              class="pub-next-btn"
            >
              <a-button
                type="primary"
                @click="previous"
              >
                上一步
              </a-button>
            </div>
          </a-card>
        </b-step>
      </b-steps>
    </base-breadcrumb>
    <div
      v-if="!isAudit"
      class="pub-header-btn page-btn-right-top"
    >
      <a-button
        v-if="state !== 3"
        :loading="loading"
        type="primary"
        @click="submit"
      >
        提交
      </a-button>
      <a-button @click="$multiTab.close($route.fullPath)">
        关闭
      </a-button>
    </div>
    <person-list
      ref="personList"
      :other-data="{ rootOrgId: $currentSubCompany().companyId }"
      @getPerson="getPerson"
    />
  </div>
</template>

<script>

import cloudBuildNetworkApi from '@/api/legal/branchContract/cloudBuildNetwork'
import { selectOption } from '@/api/material/goods/goods'
import materials from './components/materials'
import { themeChoose } from '@/mixin/mixin'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目

export default {
  name:'a'+Date.now(),
    mixins: [themeChoose],
    components: {
        materials,
        SelectSubCompany,
        SelectProject
    },
    props: {
        isAudit: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            activeKey: [true, false, false],
            loading: false,
            state: Number(this.$route.query.state),
            isSubmit: false,
            formData: {
                contractTypeId: '',
                constructionTypeId: '',
                fixed: '1',
                materialPeople: '',
                materialTel: '',
                endDate: null,
                createTime: this.getNowTime(),
                creatorName: JSON.parse(sessionStorage.getItem('ycloud-user_info')).name
            },
            stepVal: 0,
            isNext: false,
            rules: {
                branchComId: { required: true, message: '请选择所属分公司', trigger: 'change'},
                projectId: { required: true, message: '请选择项目', trigger: 'change' },
                contractTypeId: { required: true, message: '请选择合同类别', trigger: 'blur' },
                code: { required: true, message: '请填写合同编号', trigger: 'blur' },
                name: { required: true, message: '请填写合同名称', trigger: 'blur' },
                supplier: { required: true, message: '请填写合同相对方', trigger: 'blur' },
                size: { required: true, message: '请填写合同份数', trigger: 'blur' },
                materialPeople: { required: true, message: '请选择业务主管', trigger: 'blur' },
                diffs: { required: true, message: '请填写差异点', trigger: 'blur' },
                constructionTypeId: { required: true, message: '请选择工程名称', trigger: 'blur' },
                archiveDate: { required: true, message: '请选择云筑网合同归档日期', trigger: 'change' }
            },
            addFile: cloudBuildNetworkApi.addFileUrl(),
            fileDel: cloudBuildNetworkApi.deleteFileUrl(),
            fileList: cloudBuildNetworkApi.findFileListUrl(),
            getProgrammeArr: [],
            typeArr: []
        }
    },
    watch: {
        stepVal(newVal, oldVal) {
            this.$set(this.activeKey, newVal, true)
        }
    },
    mounted: async function() {
        await this.getProgramme()
        await this.getType()
        if (this.state !== 1) {
            this.formData.id = this.$route.query.id
            await this.getDetails()
            this.isSubmit = true
        }
    },
    computed: {
        disabled() {
            return this.state === 3
        }
    },
    methods: {
        getTotal() {
          this.getDetails()
        },
        async getType() {
            let res = await selectOption({ type: 14 })
            if (res.code === 200) {
                this.typeArr = res.data
                this.formData.contractTypeId = res.data[0].id
            }
        },
        async getProgramme() {
            let res = await selectOption({ type: 18 })
            if (res.code === 200) {
                this.getProgrammeArr = res.data
                this.formData.constructionTypeId = res.data[0].id
            }
        },
        getPerson(row) {
            this.formData.materialPeople = row.name
            this.formData.materialTel = row.phoneNum
        },
        previous() {
            this.isNext = true
            this.stepVal--
            if (this.stepVal < 0) {
                this.stepVal = 0
            }
        },
        next(val) {
            this.isNext = true
            this.stepVal++
        },
        stepChange(val) {
            // return this.stepVal = val
            if (!this.formData.id && !this.isAudit) {
                if (val) {
                    this.$message.warning('切换步骤前请先填写基本信息')
                    this.stepVal = 0
                }
            } else {
                if (!this.isNext) {
                    this.stepVal = val
                    this.$set(this.activeKey, val, !this.activeKey[val])
                }
            }
            this.isNext = false
        },
        // 获取编辑回显数据
        async getDetails() {
            this.loading = true
            let res = await cloudBuildNetworkApi.findListByMainId({}, { id: this.formData.id })
            if (res.code === 200) {
                this.formData = this.$assign(this.formData, res.data)
            }
            this.loading = false
        },
        async submit() {
            if (this.isSubmit) {
                this.loading = true
                let res = await cloudBuildNetworkApi.submitApply({
                    baseId: this.formData.id,
                    auditStatus: this.formData.auditStatus,
                    type: 0
                })
                if (res.code === 200) {
                    this.$message.success('提交成功')
                    this.$router.push({ path: '/legal/branch-contract/cloud-build-network/index' })
                }
                this.loading = false
            } else {
                this.$message.warning('提交之前请先暂存')
            }
        },
        temporaryStorage(isNext) {
            if (this.state === 3) return this.next()
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    let res
                    if (this.state === 2 || this.formData.id) {
                        res = await cloudBuildNetworkApi.editByMain(this.formData)
                    } else {
                        res = await cloudBuildNetworkApi.createByMain(this.formData)
                    }
                    if (res.code === 200) {
                        this.$message.success('暂存成功')
                        this.isSubmit = true
                        if (isNext) this.next()
                        this.formData.id = res.data.id
                        await this.getDetails()
                    }
                    this.loading = false
                }
            })
        }
    }
}
</script>
<style scoped>
.tender-container .ant-radio-group {
    float: right;
}

</style>
